<template>
    <div class="root">
         <my-header htitle="粘棒-粘棒区" :date="date"></my-header>
         <count-info :waitMatTotal="waitMatTotal"
                     :makeMatTotal="makeMatTotal"
                     :finishedDayCount="finishedDayCount"
                     :finishedMonthCount="finishedMonthCount"
                     :outboundDay="outboundDay"
                     :damageDay="damageDay" ></count-info>

          <div class="content">
                <div class="con-left-group">
                    <isqualified :list="isqualifiedList"></isqualified>
                    <div class="h28"></div>
                    <plan :list="planList"></plan>
                    <div class="h28"></div>
                    <notice noticeTitle="反馈通知"></notice>
                    <div class="h22"></div>
                    <printing-words :list="printingWordsList"></printing-words>
                </div>
                <div class="con-right-group">
                     <div class="finish-abnormal">
                         <finished :list="finishedList"></finished>
                         <div class="abnormal-group">
                              <notice noticeTitle="异常信息"></notice>
                              <div class="h18"></div>
                              <abnormal :list="abnormalList"></abnormal>
                         </div> 
                     </div>

                     <notice noticeTitle="超时告警"></notice>
                     <div class="h18"></div>
                     <stagnation :list="stagnationList" :abnormalInfo="abnormalInfo"></stagnation>
                </div>
          </div>           
    </div>
</template>

<script>
import MyHeader from '@/components/Header'
import CountInfo from './components/CountInfo'
import Isqualified from '@/components/Isqualified'
import Plan from '@/components/Plan'
import Notice from '@/components/Notice'
import PrintingWords from './components/PrintingWords'
import Finished from './components/Finished'
import Abnormal from './components/Abnormal'
import Stagnation from '@/components/Stagnation'

import {getZhanBangzb,getZhanBangPlan,getzbFeedback} from "../../api/chart"

export default{
    components:{
        MyHeader,
        CountInfo,
        Isqualified,
        Plan,
        Notice,
        PrintingWords,
        Finished,
        Abnormal,
        Stagnation
    },
    data () {
        return{
            date:'',
            waitMatTotal:'',
            makeMatTotal:'',
            finishedDayCount:'',
            finishedMonthCount:'',
            outboundDay:'',
            damageDay:'',
            abnormalInfo:'',
            isqualifiedList:[],
            planList:{},
            printingWordsList:[],
            finishedList:[],
            abnormalList:[],
            stagnationList:[]

        }
    },
    methods:{
       getInfo () {
            getZhanBangzb().then((data)=>{
                this.date = data.date
                this.waitMatTotal = data.stickWait
                this.makeMatTotal = data.stickHand
                this.finishedDayCount = data.stickCount
                this.finishedMonthCount = data.monthStickCount
                this.outboundDay = data.unloadWait
                // this.damageDay  =data.damageDay
            }).catch((error) => {
                console.log(error)
            })

            getZhanBangPlan().then((data)=>{
                 this.planList = data.msg
            }).catch((error) => {
                console.log(error)
            })
            
            getzbFeedback().then((data)=>{
                this.printingWordsList = data.feedbacks
            }).catch((error) => {
                console.log(error)
            })

      }
  },
  mounted () {
        clearTimeout(timer)
        this.getInfo()
        var timer = setInterval(()=>{
            this.getInfo()
        },10000)
  }

}
</script>

<style  scoped>
.root{
    background:#383A53;
    width:1920px;
    height:1080px;
}
  
.content{
    width:100%;
    box-sizing:border-box;
    padding-left:30px;
    padding-right:30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
        
.con-left-group,.con-right-group{
    width:914px;
    height:800px;
}

.finish-abnormal{
    display: flex;
    justify-content: space-between;
    align-items:flex-start;
    height:527px;
    overflow:hidden;
}

.abnormal-group{
    width:620px;
}

.h28{
    width:100%;
    height:28px;
}

.h22{
    width:100%;
    height:22px;
}

.h18{
    width:100%;
    height:18px;
}
                          
</style>